<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全国保护商机清单</title>
    <link rel="stylesheet" href="../elementui-2.15.6/element-icons.ttf">
    <link rel="stylesheet" href="../elementui-2.15.6/element-icons.woff">
    <link rel="stylesheet" href="../elementui-2.15.6/icon.css">
    <link rel="stylesheet" href="../elementui-2.15.6/elmentui.css">
    <link rel="stylesheet" href="../common.css">
    <link rel="stylesheet" href="./scss/index.css">
    <script src='../vue-2.6.12.js'></script>
    <script src='../elementui-2.15.6/elementui.js'></script>
</head>

<body>
    <div class="zl-protect-business-list" id="zl-protect-business-list-box">
        <div class="zl-protect-business-list-main">
            <div class="zl-protect-business-list-search">
                <div class="left-btn">
                    <el-form :model="searchForm" :inline="true" size="small">
                        <el-form-item label="关键字：">
                          <el-input v-model="searchForm.key" placeholder="请输入商机项目名称或最终用户"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="right-btn">
                    <el-button type="primary" size="small" icon="el-icon-search" @click="search">查询</el-button>
                    <el-button type="primary" size="small" icon="el-icon-refresh-left" @click="reset">重置</el-button>
                </div>
                <div class="total-rows">
                    查询到的商机：<span class="number">{{pageData.total}}</span>
                </div>
            </div>
            <div class="zl-protect-business-list-table">
                <el-table :data="tableData" 
                    style="width: 200%" 
                    height="100%" 
                    ref="multipleTable" 
                    :row-class-name="tableRowClassName"
                    >
                    <!-- <el-table-column type="selection" width="55">
                    </el-table-column> -->
                    <template v-for="(item, index) in tableHeader">
                        <el-table-column :prop="item.key" :label="item.label" v-if="item.key !== 'op'" :key="index"
                        :min-width="item.minWidth"
                            :width="item.width" :align="item.align || 'center'" show-overflow-tooltip>
                            <template slot-scope="scope">
                                <!-- 第一种方式：直接在显示内容中添加换行符 -->
                                <!-- <span v-if="item.slot" v-html="scope.row[item.key]"></span> -->
                                <!-- 第二种 通过不同字段组装，便于维护 -->
                                <div v-if="item.slot && item.key === 'zzyhxx'">
                                    <span class="slotText">{{scope.row.xmm}}</span>
                                    <span class="slotText">{{scope.row.userName}}</span>
                                    <span class="slotText">{{scope.row.address}}</span>
                                    <span class="slotText red">{{scope.row.email}}</span>
                                </div>
                                <div v-else-if="item.slot && item.key === 'bbzt'">
                                    <!-- <span class="slotText">{{scope.row.zt}}</span> -->
                                    <el-tag size="small" 
                                    :type="scope.row.zt === '成立' || scope.row.zt === '赢单'? 'success': scope.row.zt === '已过期' || scope.row.zt === '未成立' ? 'danger' : scope.row.zt === '丢单' || scope.row.zt === '快过期'? 'warning':''">
                                        {{scope.row.zt}}
                                    </el-tag>
                                    <span class="slotText">{{ztMap[scope.row.zt]}}于：{{scope.row.ztTime}}</span>
                                </div>
                                <span v-else>{{scope.row[item.key]}}</span>
                            </template>
                        </el-table-column>
                    </template>
                </el-table>
                <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="pageData.currentPage" :page-sizes="[10, 20, 30, 40, 50]"
                    :page-size="pageData.pageSize" layout="total, prev, pager, next, sizes" :total="pageData.total">
                </el-pagination>
            </div>
        </div>
    </div>

    <script>
        new Vue({
            el: '#zl-protect-business-list-box',
            data() {
                return {
                    searchForm:{
                        key: ''
                    },
                    tableHeader: [
                        { label: '备案号', key: 'bah',minWidth: '15%', slot: true },
                        { label: '项目名称', key: 'xmmc',minWidth: '20%', },
                        { label: '最终用户信息', key: 'zzyhxx',minWidth: '30%',align: 'left',slot:true},
                        { label: '报备状态', key: 'bbzt',minWidth: '20%',align: 'left',slot:true  }
                    ],
                    tableData: [
                        {
                            bah: '123456', xmmc: '中国人民银行清算中心UPS项目', 
                            zzyhxx: '中国人民银行清算中心<br>董经理<br>jiangsu 无锡市滨湖区十里明珠堤<br>tech61@yuanfeng.cn',
                            bbzt: '成立<br>成立于：2021/9/27',
                            xmm: '中国人民银行清算中心',
                            userName: '董经理',
                            address: 'jiangsu 无锡市滨湖区十里明珠堤',
                            email: 'tech61@yuanfeng.cn',
                            zt: '成立',
                            ztTime: '2021/9/27'
                        },
                        {
                            bah: '123456', xmmc: '中国人民银行清算中心UPS项目', 
                            zzyhxx: '中国人民银行清算中心<br>董经理<br>jiangsu 无锡市滨湖区十里明珠堤<br>tech61@yuanfeng.cn',
                            bbzt: '成立<br>成立于：2021/9/27',
                            xmm: '中国人民银行清算中心',
                            userName: '董经理',
                            address: 'jiangsu 无锡市滨湖区十里明珠堤',
                            email: 'tech61@yuanfeng.cn',
                            zt: '审核中',
                            ztTime: '2021/9/27'
                        },
                        {
                            bah: '123456', xmmc: '中国人民银行清算中心UPS项目', 
                            zzyhxx: '中国人民银行清算中心<br>董经理<br>jiangsu 无锡市滨湖区十里明珠堤<br>tech61@yuanfeng.cn',
                            bbzt: '成立<br>成立于：2021/9/27',
                            xmm: '中国人民银行清算中心',
                            userName: '董经理',
                            address: 'jiangsu 无锡市滨湖区十里明珠堤',
                            email: 'tech61@yuanfeng.cn',
                            zt: '已过期',
                            ztTime: '2021/9/27'
                        },
                        {
                            bah: '123456', xmmc: '中国人民银行清算中心UPS项目', 
                            zzyhxx: '中国人民银行清算中心<br>董经理<br>jiangsu 无锡市滨湖区十里明珠堤<br>tech61@yuanfeng.cn',
                            bbzt: '成立<br>成立于：2021/9/27',
                            xmm: '中国人民银行清算中心',
                            userName: '董经理',
                            address: 'jiangsu 无锡市滨湖区十里明珠堤',
                            email: 'tech61@yuanfeng.cn',
                            zt: '赢单',
                            ztTime: '2021/9/27'
                        },
                        {
                            bah: '123456', xmmc: '中国人民银行清算中心UPS项目', 
                            zzyhxx: '中国人民银行清算中心<br>董经理<br>jiangsu 无锡市滨湖区十里明珠堤<br>tech61@yuanfeng.cn',
                            bbzt: '成立<br>成立于：2021/9/27',
                            xmm: '中国人民银行清算中心',
                            userName: '董经理',
                            address: 'jiangsu 无锡市滨湖区十里明珠堤',
                            email: 'tech61@yuanfeng.cn',
                            zt: '未成立',
                            ztTime: '2021/9/27'
                        },
                        {
                            bah: '123456', xmmc: '中国人民银行清算中心UPS项目', 
                            zzyhxx: '中国人民银行清算中心<br>董经理<br>jiangsu 无锡市滨湖区十里明珠堤<br>tech61@yuanfeng.cn',
                            bbzt: '成立<br>成立于：2021/9/27',
                            xmm: '中国人民银行清算中心',
                            userName: '董经理',
                            address: 'jiangsu 无锡市滨湖区十里明珠堤',
                            email: 'tech61@yuanfeng.cn',
                            zt: '丢单',
                            ztTime: '2021/9/27'
                        },
                        {
                            bah: '123456', xmmc: '中国人民银行清算中心UPS项目', 
                            zzyhxx: '中国人民银行清算中心<br>董经理<br>jiangsu 无锡市滨湖区十里明珠堤<br>tech61@yuanfeng.cn',
                            bbzt: '成立<br>成立于：2021/9/27',
                            xmm: '中国人民银行清算中心',
                            userName: '董经理',
                            address: 'jiangsu 无锡市滨湖区十里明珠堤',
                            email: 'tech61@yuanfeng.cn',
                            zt: '冲突/重复',
                            ztTime: '2021/9/27'
                        },
                        {
                            bah: '123456', xmmc: '中国人民银行清算中心UPS项目', 
                            zzyhxx: '中国人民银行清算中心<br>董经理<br>jiangsu 无锡市滨湖区十里明珠堤<br>tech61@yuanfeng.cn',
                            bbzt: '成立<br>成立于：2021/9/27',
                            xmm: '中国人民银行清算中心',
                            userName: '董经理',
                            address: 'jiangsu 无锡市滨湖区十里明珠堤',
                            email: 'tech61@yuanfeng.cn',
                            zt: '快过期',
                            ztTime: '2021/9/27'
                        },
                        {
                            bah: '123456', xmmc: '中国人民银行清算中心UPS项目', 
                            zzyhxx: '中国人民银行清算中心<br>董经理<br>jiangsu 无锡市滨湖区十里明珠堤<br>tech61@yuanfeng.cn',
                            bbzt: '成立<br>成立于：2021/9/27',
                            xmm: '中国人民银行清算中心',
                            userName: '董经理',
                            address: 'jiangsu 无锡市滨湖区十里明珠堤',
                            email: 'tech61@yuanfeng.cn',
                            zt: '草稿',
                            ztTime: '2021/9/27'
                        },
                    ],
                    pageData: {
                        currentPage: 1,
                        pageSize: 10,
                        total: 196
                    },
                    ztMap: {
                        '成立':'成立',
                        '审核中':'报备',
                        '已过期':'过期',
                        '未成立':'报备',
                        '赢单':'关闭',
                        '丢单':'关闭',
                        "冲突/重复":'关闭',
                        '快过期': '过期',
                        '草稿': '编辑'
                    }
                }
            },
            methods: {
                tableRowClassName({row, rowIndex}) {
                    if (row.zt === '已过期' || row.zt === '未成立') {
                        return 'danger-row';
                    }
                    return '';
                },
                search() {
                    console.log('查询');
                },
                reset(){
                    this.searchForm.key = ''
                    this.search();
                },
                // 切换每页展示数量
                handleSizeChange(size) {
                    console.log(size);
                    this.search();
                },
                // 切换页码
                handleCurrentChange(val) {
                    console.log(`当前页: ${val}`);
                    this.search();
                }
            }
        })
    </script>
</body>

</html>